iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
Mobile Development

iOS App初心者的30天試鍊系列 第 21

Day21:如何在沒有MacOS時設計MainStoryBoard的畫面

  • 分享至 

  • xImage
  •  

在昨天介紹完Day20-偶像劇報時器後,今天我們來講一下如果手邊剛好出門在外沒有

MacOS時,如何就近取材利用手上的資源做出基本的UI介面,運用Marvel網站服務做

一個prototype app

https://ithelp.ithome.com.tw/upload/images/20190928/20112182bqsMCywlU1.jpg

操作步驟 :

1.建立一個專案 , 選擇要顯示的iPhone設備 (iPhone X)

https://ithelp.ithome.com.tw/upload/images/20190928/20112182CqEUDoNGF1.jpg

2.接下來可以選擇Template或拖拉Image

https://ithelp.ithome.com.tw/upload/images/20190928/20112182NwAcVEsx0W.jpg

3.可以依照需求拖拉UI元件

https://ithelp.ithome.com.tw/upload/images/20190929/20112182z8c59IRGe1.jpg

4.製作好幾個頁面,如下圖

https://ithelp.ithome.com.tw/upload/images/20190929/20112182jUVlBLJWTy.jpg

5.點選Prototype , 建立各頁間的連接關係

https://ithelp.ithome.com.tw/upload/images/20190929/201121822teWyS5DyO.jpg

6.框選點擊的區域

https://ithelp.ithome.com.tw/upload/images/20190929/201121820oI8oTbCfH.jpg

7.選取連接的下一個頁面

https://ithelp.ithome.com.tw/upload/images/20190929/20112182Km59kb2tat.jpg

8.選取要進來的方向

https://ithelp.ithome.com.tw/upload/images/20190929/20112182dO4gLGU3Wk.jpg

9.完成後會得到一個網址 , 若要下載PNG檔需要提升方案等級 , 即完成免MacOS的

UI草圖設計 , 有興趣的朋友可以玩一下做出來的App介面

https://marvelapp.com/1ic19b76/screen/61901720

https://ithelp.ithome.com.tw/upload/images/20190929/20112182utgSTM0NES.jpg


上一篇
Day20:如何使用Date和Timer來製作帥哥/美女報時器
下一篇
Day22:如何使用 Auto Layout來設計Clock App的cell畫面
系列文
iOS App初心者的30天試鍊31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言